<template>
  <div class="container">
    <van-nav-bar
      fixed
      title="我的"
    >
      <template #right>
        <van-icon
          @click="$router.push('/user/edit')"
          name="setting-o"
          size="18"
          v-if="hasLogin"
        />
      </template>
    </van-nav-bar>
    <van-row
      align="center"
      type="flex"
      class="user-bg"
      v-if="hasLogin"
    >
      <!-- 左侧 -->
      <van-image
        round
        class="user-img"
        :src="'http://124.223.14.236:8060/'+userinfo.icon"
      />
      <!-- 右侧 -->
      <div class="text">
        <h3>{{userinfo.username}}</h3>
        <p>{{userinfo.notes}}</p>
      </div>
    </van-row>
    <van-row
      align="center"
      @click="$router.push('/login')"
      justify="space-between"
      type="flex"
      class="user-bg"
      v-else
    >
      <!-- 左侧 -->
      <van-row
        type="flex"
        align="center"
      >
        <van-image
          round
          class="user-img"
          src=""
          error-icon="user-o"
        />
        <div class="text">
          <h3>请登录</h3>
          <p>登录之后更加精彩！</p>
        </div>
      </van-row>
      <!-- 右侧 -->
      <van-icon
        name="arrow"
        size="30px"
      />
    </van-row>

    <van-grid
      :column-num="3"
      v-if="hasLogin"
    >
    <van-grid-item icon="like-o"  to="/user/sc" :text="`收藏${alls.collectNum
    }篇`" />
    <van-grid-item icon="good-job-o"  to="/user/zan" :text="`点赞${alls.zanNum}篇`" />
    <van-grid-item icon="newspaper-o"  to="/user/article" :text="`发布${alls.articleNum}篇`" />
    </van-grid>
    <van-cell-group>
      <van-cell
        icon="send-gift-o"
        to="/user/article"
        title="我的文章"
        is-link
      />
      <van-cell
        icon="diamond-o"
        to="/user/sc"
        title="我的收藏"
        is-link
      />
      <van-cell
        icon="thumb-circle-o"
        to="/user/zan"
        title="我的点赞"
        is-link
      />
    </van-cell-group>
    <van-cell-group
      class="quit-btn"
      v-if="hasLogin"
    >
      <van-button
        type="info"
        block
        @click="quit"
      >立即退出</van-button>
    </van-cell-group>
  </div>
</template>

<script>

import { userinfo } from '@/api/userinfo.js'
import { removetoken,gettoken } from '@/utils/storage'
export default {
  data () {
    return {
      hasLogin: false,
      userinfo: {},
      alls:{}
    }
  },
  async created () {
    // console.log(this.$route.query);
    // this.hasLogin = this.$route.query.flag

    const res = await userinfo()
    console.log(res.data.userInfo);
    this.alls=res.data
    if (res.errno === 0) {
      this.hasLogin = gettoken()
      this.userinfo = res.data.userInfo
    } else {
      this.$toast.fail(res.errmsg)
    }

  },
  async mounted () {

  },
  methods: {
    async quit () {
      this.$dialog.confirm({
        title: '退出登录',
        message: '确认退出吗'
      })
        .then(() => {
          // on confirm
          removetoken()
          this.hasLogin = false
        })
        .catch((err) => {
          // on cancel
          console.log(err);
        })


    }
  },
}
</script>
<style scoped lang="less">
.user-bg {
  background: #1989fa;
  color: #fff;
  padding: 30px;
  .text {
    margin-left: 30px;
    h3 {
      font-size: 30px;
    }
  }
}
.van-hairline--bottom::after {
  border: none;
}
.user-img {
  width: 150px;
  height: 150px;
  border: 6px solid #fff;
  background-color: #fff;
}
.quit-btn {
  margin: 32px;
}
</style>
